<template>
  <div class="app-container home">
    <!-- 顶部欢迎区域 -->
    <el-row class="welcome-banner" :gutter="20">
      <el-col :sm="24" :lg="14">
        <div class="welcome-content">
          <h1>我爱兴安盟 <span class="version-tag">v{{ version }}</span></h1>
          <p class="subtitle">兴安盟生活服务平台后台管理系统</p>
          <div class="description">
            <p>这是一个专为兴安盟居民设计的便捷生活小程序，包含客车时刻表、客运站电话、旅游景点信息等实用功能。</p>
            <p>初衷是为了解决乘坐客车时不清楚发车时间的问题，同时整合了代驾等常用电话服务，希望为兴安盟的发展贡献一份力量。</p>
          </div>
          <div class="quick-actions">
            <el-button type="primary" icon="el-icon-time" @click="$router.push('/bus/bus')"> 客车时刻表</el-button>
            <el-button type="success" icon="el-icon-phone" @click="$router.push('/travel/travel')">常用电话</el-button>
            <el-button type="warning" icon="el-icon-place" @click="$router.push('/free/free')">景点管理</el-button>
          </div>
        </div>
      </el-col>
      <el-col :sm="24" :lg="10">
        <div class="banner-image">
          <div class="image-placeholder">

            <img v-if="wechatImgLoaded" src="../assets/images/xam1.jpg" alt="兴安盟风光" width="450">
            <p>兴安盟风光</p>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 核心功能展示 -->
    <el-row :gutter="20" class="feature-cards">
      <el-col :xs="24" :sm="12" :md="8" :lg="8">
        <el-card shadow="hover" class="feature-card">
          <div class="card-icon bg-blue">
            <i class="el-icon-time"></i>
          </div>
          <h3>客车时刻表</h3>
          <p>提供兴安盟各线路客车的详细发车时间，方便居民出行规划</p>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="8">
        <el-card shadow="hover" class="feature-card">
          <div class="card-icon bg-green">
            <i class="el-icon-phone"></i>
          </div>
          <h3>常用电话</h3>
          <p>整合客运站、代驾等常用服务电话，一键拨打更便捷</p>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="8">
        <el-card shadow="hover" class="feature-card">
          <div class="card-icon bg-orange">
            <i class="el-icon-place"></i>
          </div>
          <h3>旅游景点</h3>
          <p>展示兴安盟美丽景点信息，促进本地旅游业发展</p>
        </el-card>
      </el-col>
    </el-row>

    <!-- 底部信息区域 -->
    <el-row :gutter="20" class="info-section">
      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card class="info-card" shadow="hover">
          <div slot="header" class="card-header">
            <i class="el-icon-cpu"></i>
            <span>技术架构</span>
          </div>
          <div class="tech-stack">
            <div class="tech-column">
              <h4>后端技术</h4>
              <ul>
                <li><i class="el-icon-check"></i> SpringBoot</li>
                <li><i class="el-icon-check"></i> Spring Security</li>
                <li><i class="el-icon-check"></i> JWT</li>
                <li><i class="el-icon-check"></i> MyBatis</li>
                <li><i class="el-icon-check"></i> Druid</li>
              </ul>
            </div>
            <div class="tech-column">
              <h4>前端技术</h4>
              <ul>
                <li><i class="el-icon-check"></i> Vue.js</li>
                <li><i class="el-icon-check"></i> Element UI</li>
                <li><i class="el-icon-check"></i> Vuex</li>
                <li><i class="el-icon-check"></i> Axios</li>
                <li><i class="el-icon-check"></i> Sass</li>
              </ul>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card class="info-card" shadow="hover">
          <div slot="header" class="card-header">
            <i class="el-icon-notebook-2"></i>
            <span>更新日志</span>
          </div>
          <el-collapse accordion>
            <el-collapse-item title="v1.0.0 - 2025-07-22" name="1">
              <ol>
                <li>新增小程序首页功能</li>
                <li>实现通知公告系统</li>
                <li>完成轮播图管理</li>
                <li>开发客车时刻表功能</li>
                <li>搭建景点信息模块</li>
                <li>整合便捷生活服务</li>
              </ol>
            </el-collapse-item>
          </el-collapse>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card class="info-card" shadow="hover">
          <div slot="header" class="card-header">
            <i class="el-icon-chat-line-round"></i>
            <span>联系我们</span>
          </div>
          <div class="contact-info">
            <p><i class="el-icon-s-promotion"></i> 官网: <a href="http://www.nmgywz.cn" target="_blank">内蒙古优唯泽信息技术有限公司</a></p>
            <p><i class="el-icon-user-solid"></i> QQ群: <a href="https://qun.qq.com/universal-share/share?ac=1&authKey=fqB39Pp1oh9BoJTOa7VOthcYPtM9LIlZfbB0u1nsO3nzIcPerXL0sL9ZzYb4uPzU&busi_data=eyJncm91cENvZGUiOiI1NzgxMTI0NzYiLCJ0b2tlbiI6IjVwM2xobTNJcHN2OTdXT09XVndnZ2toQ0ZEdXl1NkxyaUs2bng1WWEzWDVCdEFDUmt0cFN0aVpLemI2Y0tkZDUiLCJ1aW4iOiI3OTg1MjAyMjgifQ%3D%3D&data=hT1glgk3RhOqLjkbEO1LVVJoc1q8hzlj6G4uADpaYbydNLy7hKZDxl-yCUC2vEIV7ySqR8Y08-EcWcEDFzJJGA&svctype=4&tempid=h5_group_info" target="_blank">578112476</a></p>
            <div class="wechat-contact">
              <img v-if="wechatImgLoaded" src="@/assets/images/x.png" alt="微信联系" width="120">
              <div v-else class="qr-placeholder">
                <i class="el-icon-chat-dot-round"></i>
                <p>微信二维码</p>
              </div>
              <p>扫描二维码添加作者微信</p>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      version: "1.0.0",
      wechatImgLoaded: false
    };
  },
  mounted() {
    this.checkWechatImage();
  },
  methods: {
    checkWechatImage() {
      const img = new Image();
      img.src = require('@/assets/images/x.png');
      img.onload = () => {
        this.wechatImgLoaded = true;
      };
      img.onerror = () => {
        this.wechatImgLoaded = false;
      };
    }
  }
};
</script>

<style scoped lang="scss">
.home {
  .welcome-banner {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 8px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

    .welcome-content {
      h1 {
        font-size: 36px;
        color: #2c3e50;
        margin-bottom: 10px;
        font-weight: 600;

        .version-tag {
          font-size: 14px;
          background: #409EFF;
          color: white;
          padding: 3px 10px;
          border-radius: 20px;
          margin-left: 12px;
          vertical-align: middle;
        }
      }

      .subtitle {
        font-size: 18px;
        color: #7f8c8d;
        margin-bottom: 20px;
      }

      .description {
        p {
          font-size: 15px;
          line-height: 1.6;
          color: #555;
          margin-bottom: 15px;
        }
      }

      .quick-actions {
        margin-top: 25px;

        .el-button {
          margin-right: 12px;
          padding: 10px 20px;
          font-size: 14px;
        }
      }
    }

    .banner-image {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;

      .image-placeholder {
        width: 450px;
        height: 200px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: #f5f7fa;
        border-radius: 6px;
        color: #909399;

        i {
          font-size: 50px;
          margin-bottom: 10px;
        }

        p {
          font-size: 16px;
        }
      }
    }
  }

  .feature-cards {
    margin-bottom: 30px;

    .feature-card {
      border: none;
      text-align: center;
      transition: transform 0.3s;
      margin-bottom: 20px;

      &:hover {
        transform: translateY(-5px);
      }

      .card-icon {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 20px auto;
        font-size: 30px;
        color: white;

        &.bg-blue {
          background: linear-gradient(45deg, #409EFF, #64b5f6);
        }
        &.bg-green {
          background: linear-gradient(45deg, #67C23A, #81c784);
        }
        &.bg-orange {
          background: linear-gradient(45deg, #E6A23C, #ffb74d);
        }
      }

      h3 {
        font-size: 18px;
        color: #34495e;
        margin-bottom: 12px;
      }

      p {
        color: #7f8c8d;
        font-size: 14px;
        line-height: 1.5;
        padding: 0 15px 20px;
      }
    }
  }

  .info-section {
    .info-card {
      border: none;
      margin-bottom: 20px;

      .card-header {
        font-size: 16px;
        font-weight: bold;

        i {
          margin-right: 8px;
          color: #409EFF;
        }
      }

      .tech-stack {
        display: flex;

        .tech-column {
          flex: 1;

          h4 {
            font-size: 15px;
            color: #606266;
            margin-bottom: 12px;
            padding-bottom: 8px;
            border-bottom: 1px solid #ebeef5;
          }

          ul {
            padding-left: 0;

            li {
              padding: 6px 0;
              color: #606266;

              i {
                margin-right: 8px;
                color: #67C23A;
              }
            }
          }
        }
      }

      .contact-info {
        p {
          margin-bottom: 12px;
          color: #606266;

          i {
            margin-right: 8px;
            color: #409EFF;
          }

          a {
            color: #606266;
            text-decoration: none;

            &:hover {
              color: #409EFF;
            }
          }
        }

        .wechat-contact {
          text-align: center;
          margin-top: 15px;

          img {
            border: 1px solid #eee;
            padding: 5px;
            background: white;
          }

          .qr-placeholder {
            width: 120px;
            height: 120px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background-color: #f5f7fa;
            border-radius: 4px;
            color: #909399;

            i {
              font-size: 40px;
              margin-bottom: 10px;
            }
          }

          p {
            margin-top: 8px;
            font-size: 13px;
            color: #909399;
          }
        }
      }
    }
  }
}
</style>
